<template>
  <div class="discount_box">
    <tab :tabs="tablist" :activeName="activeName" @tabClick="handleClick"></tab>
    <!-- <div class="discount_radio_box">
      <div class="discount-item" v-for="(item, index) in tablist" :key="index">
        <input type="radio" class="discountR" name="discountR" v-model="curPerStatus" :value="item.value" @change="handleClick"/>
        <span class="radiospan"></span>{{item.label}}
      </div>
    </div> -->
    <template v-if="activeName === 'freight'">
      <div class="content" v-if="freightList.length > 0">
        <div class="coupon_box" :class="{'no_use': perferItem.status === 0, 'used': perferItem.status !== 0 }" v-for="(perferItem, perferIndex) in freightList" :key="perferIndex">
          <h2 class="money"><em class="flag">¥</em>{{perferItem.amount}}<em class="used-text" v-if="perferItem.status !== 0">此券已使用</em></h2>
          <div class="cut_line"></div>
          <div class="text-box">
            <h3>运费券</h3>
            <ul class="used-ul coupon-ul">
              <li>无门槛红包,可与其他优惠叠加</li>
              <li>有效期 {{perferItem.receivingTime | filterDate}} - {{perferItem.overdueTime | filterDate}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="no-content" v-else>暂时没有运费券</div>
    </template>
    <template v-else-if="activeName === 'voucher' || activeName === 'brand'">
      <div class="content" v-if="voucherList.length > 0">
        <div class="coupon_box" :class="{'no_use': perferItem.status === 0, 'used': perferItem.status !== 0 }" v-for="(perferItem, perferIndex) in voucherList" :key="perferIndex">
          <h2 class="money"><em class="flag">¥</em>{{perferItem.amount}}<em class="used-text" v-if="perferItem.status !== 0">此券已使用</em></h2>
          <div class="cut_line"></div>
          <div class="text-box">
            <h3>{{activeName === 'voucher' ? '代金券' : '品牌券'}}</h3>
            <ul class="used-ul coupon-ul">
              <li>金额满{{perferItem.useScope}}可用，不可与其他优惠叠加</li>
              <li v-show="perferItem.brands">
                限<template v-for="(brandItem, ind) in perferItem.brands"><em class="brand-item">{{brandItem.brandName}}</em></template>品牌可用</li>
              <li>有效期 {{perferItem.receivingTime | filterDate}} - {{perferItem.overdueTime | filterDate}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="no-content" v-else>{{activeName === 'voucher' ? '暂时没有可用代金券' : '暂时没有可用品牌券'}}</div>
    </template>
    <template v-else>
      <div class="content" v-if="redList.length > 0">
        <div class="coupon_box" :class="{'no_use': perferItem.status === 0, 'used': perferItem.status !== 0 }" v-for="(perferItem, perferIndex) in redList" :key="perferIndex">
          <h2 class="money"><em class="flag">¥</em>{{perferItem.amount}}<em class="used-text" v-if="perferItem.status !== 0">此红包已使用</em></h2>
          <div class="cut_line"></div>
          <div class="text-box">
            <h3>红包</h3>
            <ul class="used-ul coupon-ul">
              <li>无门槛红包,可与其他优惠叠加</li>
              <li>有效期 {{perferItem.receivingTime | filterDate}} ~ {{perferItem.overdueTime | filterDate}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="no-content" v-else>暂时没有红包</div>
    </template>
    <el-row v-if="pageObj.totalRecords && pageObj.totalRecords > 6" style="width:100%;">
      <el-pagination layout="total, prev, pager, next, ->" :current-page.sync="page" :page-size="6"
        :total="pageObj.totalRecords" @current-change="handlePage" class="page_box"></el-pagination>
    </el-row>
    
  </div>
</template>
<script>
  import {TabPane, Pagination, Row} from 'element-ui'
  import {getPreferList, getDiscountList, getFreightList} from '@/service/get-data'
  import {getCookie} from '@/config/mUntils'
  import {tab} from '@/components/index'
  export default{
    components: {
      elTabPane: TabPane,
      elPagination: Pagination,
      elRow: Row,
      tab
    },
    data () {
      return {
        tablist: [{name: 'voucher', text: '代金券'}, {name: 'discount', text: '红包'}, {name: 'brand', text: '品牌券'}, {name: 'freight', text: '运费券'}], // tab列表
        activeName: 'voucher',
        page: 1,
        number: 6,
        curPerStatus: 0, // 当前红包状使用态 0可用
        voucherList: [], // 显示的代金券列表
        redList: [], // 红包列表
        freightList: [], // 运费券列表
        pageObj: {}, // 请求返回的页码数据
        brandLimit: false // 品牌优惠券
      }
    },
    methods: {
      // 规格页码选择
      handlePage (currentPage) {
        this.page = currentPage
        this.handleMethods()
      },
      handleClick (tab) {
        this.activeName = tab.name
        this.page = 1
        // if (this.Exam !== 1) return
        this.handleMethods()
      },
      handleMethods () {
        if (this.activeName === 'voucher') {
          this.brandLimit = false
          this.fetchPreferList()
        } else if (this.activeName === 'brand') {
          this.brandLimit = true
          this.fetchPreferList()
        } else if (this.activeName === 'freight') {
          this.fetchFreightList()
        } else {
          this.fetchDiscountList()
        }
      },
      // 获取优惠券列表
      async fetchDiscountList () {
        let res = await getDiscountList(this.page, this.number)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          res = res.data
          this.redList = res.data.list
          this.pageObj = res.data.page
        } else {
          this.$message({message: res.data.resultMsg})
        }
      },
      // 获取优惠列表
      async fetchPreferList () {
        let res = await getPreferList(this.page, this.number, this.curPerStatus, undefined, this.brandLimit)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          res = res.data
          this.voucherList = res.data.list
          this.pageObj = res.data.page
        } else {
          this.$message({message: res.data.resultMsg})
        }
      },
      // 运费券列表
      async fetchFreightList () {
        let res = await getFreightList(this.page, this.number, this.curPerStatus)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          res = res.data
          this.freightList = res.data.list
          this.pageObj = res.data.page
        } else {
          this.$message({message: res.data.resultMsg})
        }
      }
    },
    computed: {
      Exam () {
        return getCookie('Exam') - 0
      }
    },
    mounted () {
      this.fetchPreferList()
    },
    filters: {
      parseIntType (val) {
        return parseInt(val)
      },
      filterDate (value) {
        if (!value) return ''
        value = value.split(' ')[0]
        return value
      }
    }
  }
</script>
<style lang="scss" scoped>
.content{
  // display: flex;
  // justify-content: space-between;
  // flex-wrap: wrap;
  min-height: 500px;
}
  .discount_radio_box{
    font-size: 14px;
    color: #666;
    padding-bottom: 14px;
    margin-bottom: 30px;
    border-bottom: 1px solid #E5E5E5;
    .discount-item{
      display: inline-block;
      margin-right: 20px;
    }
    .discountR{
      opacity: 0;
      position: absolute;
      z-index: 8;
      width: 14px;
      height: 14px;
    }
    input[type='radio'].discountR + .radiospan{
      position: relative;
      display: inline-block;
      width:8px;
      height:8px;
      background: #FFFFFF;
      border: 1px solid #C5C5C5;
      padding:1.5px;
      margin-right: 10px;
    }
    input[type='radio'].discountR:checked + .radiospan{
      position: relative;
      &:after{
        display: inline-block;
        position: absolute;
        width:8px;
        height:8px;
        content: '';
        background: #FFCC00;
      }
    }
  }
 .coupon_box{
    position: relative;
    display:inline-block;
    width: calc(50% - 12px);
    border-radius: 3px;
    margin-bottom: 30px;
    // margin-right: 3%;
    &:nth-child(2n-1) {
     margin-right: 18px;
    }
    .money{
      padding:24px 30px;
      font-size: 36px;
      .flag{
        font-size: 24px;
      }
      .used-text{
        float: right;
        font-size: 14px;
        color: #999999;
        margin-top: 20px;
      }
    }
    .cut_line{
      position: relative;
      width:100%;
      border-bottom: 1px dashed #ffffff;
      &:before{
        display: inline-block;
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        content: '';
        top: -6px;
        left: -10px;
        border-right: 1px solid #E5E5E5;
        z-index: 50;
      }
      &:after{
        display: inline-block;
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        content: '';
        top: -6px;
        right: -10px;
        border-left: 1px solid #E5E5E5;
        z-index: 50;
      }
    }
    .brand-item{
      position: relative;
      padding-right: 4px;
      &:last-child{
        padding-right: 0;
      }
      &:nth-child(n+2):before {
        content:'，';
        position: absolute;
        left: -7px;
      }
    }
    .text-box{
      padding: 18.5px 30px;
      line-height: 20px;
      font-size: 12px;
      opacity: 0.8;
      margin-bottom: 0;
      h3{
        font-size: 16px;
        margin-bottom: 15px;
      }
    }
    .coupon-ul{
      li {
        list-style-type:square;
        color:#fff;
      }
      
    }
  }
  .no_use{
    color:#fff;
    background: linear-gradient(14deg, #F5A310 0%, #FFCD08 100%);
  }
  .used{
    color: #999999;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 3px;
    opacity: 1;
    .text-box{
      background: #F5F5F5;
    }
    .line{
      border-bottom: 1px dashed #E5E5E5;
    }
    .coupon-ul{
      li {
        color:#999999;
      }
    }
  }

 
</style>

